<template name="navbar">
	<view class="prohibition">
		<view class="demo" :style="[{background},{color},{height},{paddingTop}]">
			<!-- 左侧返回按钮 -->
			<!-- <view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]"> -->
				<!-- <uni-icons type="arrowleft" size="30" :color='color'></uni-icons> -->
				<!-- 此处图标使用的是 uni-ui图标 -->
			<!-- </view> -->
			<view style="width: 100%;padding-left: 5%;position: absolute;bottom: 0;" v-if="back">
				<u-image width="65%" height="80rpx" src="/static/images/logo.png"></u-image>
			</view>
			<!-- 中间标题文字 -->
			<view class="title" style="position: absolute;bottom: 20rpx;" v-else>
				{{title}}
			</view>
		</view>
		<view class="u-pt-90">
			
		</view>
	</view>
</template>
 
<script>
	export default {
		name: "navbar",
		props:{
			title:{ // 标题文字(默认为空)
				type:String,
				default:''
			},
			color:{ // 标题和返回按钮颜色(默认白色)
				type:String,
				default:'#fff'
			},
            //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background:{ // 背景颜色(不传值默认透明)
				type:String,
				default:'transparent'
			},
			back:{ // 是否显示返回按钮(不传值默认不显示)
				type:Boolean,
				default:false
			},
			height:{
				type:String,
				default:'180rpx'
			},
			paddingTop:{
				type:String,
				// default:'95rpx',
				default:'0rpx'
			}
		},
		data() {
			return {}
		},
		
		methods: {
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			}
		}
	}
</script>
<style scoped>
	.demo {
		/* position: relative; */
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;
	}
	
	.left {
		float: left;
		position: absolute;
		width: 100rpx;
		height: 50rpx;
		top: 0;
		bottom: 0;
		left: 20rpx;
		color: #fff;
		margin: auto;
	}
	 
	.title {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		color: black;
	}
	
</style>